import React, { memo } from 'react'
import { Tabs } from 'antd-mobile'
import style from './sty.module.css'
import Scroll from '@/components/scroll'
import SongList from '@/components/SongList'
import PropTypes from 'prop-types'
import { createMarkup } from '@/utils/util'

import { useSelector } from 'react-redux'

const Content = (props) => {
    const { info } = props
    //数据已经全部返回，所以这里模拟数据请求和分页
    const { currentSong, playlist } = useSelector(state => ({
        currentSong: state.getIn(['curSong']),
        playlist: state.getIn(['playList'])
    }))
    const tabs = [
        { title: '歌曲' },
        { title: '详情' }
    ]


    const h = playlist.length ? 60 : 0;
    const height = { height: `calc(100vh - ${300 + h}px)` }

    return (
        <div>
            <Tabs tabs={tabs} swipeable={false}>
                <div style={height}>
                    <SongList list={info.tracks} currentSong={currentSong} />
                </div>
                <div style={height}>
                    <Scroll>
                        <div className={style.description} dangerouslySetInnerHTML={createMarkup(info.description)} />
                    </Scroll>
                </div>
            </Tabs>
        </div>
    )
}
Content.propTypes = {
    info: PropTypes.object
}
Content.defaultProps = {
    info: {}
}

export default memo(Content)